<template>
	<view class="opbox">
		<view class="opuser">
			<view class="userphone">
				<view class="phone">手机号</view>
				<view class="">{{phone}}</view>
			</view>
			<view class="username">
				<view class="name">姓名</view>
				<view class="">{{name}}</view>
			</view>
		</view>
		<view class="opnav">
			<view class="optit">
				<image class="anvpic" :src="image" mode=""></image>
				<view class=""v-if="level==1">白银会员</view>
				<view class=""v-else-if="level==2">黄金会员</view>
				<view class=""v-else-if="level==3">钻石会员</view>
			</view>
			<view class="xzbox">
				<view class="">常去门店</view>
				<view class="xzmd" @click="show = true">
					<view class="">{{text}}</view>
					<up-icon name="arrow-right" color="#bdbdbd" size="16"></up-icon>
				</view>
			</view>
		</view>
		<up-picker :show="show" :columns="columns" ref="uPickerRef" keyName="name" @closeOnClickOverlay="closeOnClickOverlay" @cancel="cancel" @confirm="confirm" @change="distChangeHandler"></up-picker>
		<view class="opfk">
			<view class="money"><text style="font-size: 14px; color: #787878;">合计：</text><text style="font-size: 12px;">￥</text>{{money}}</view>
			<view class="tijiao" @click="tjvip">提交订单</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import request from '../../utils/request';
onLoad((options)=>{
	token.value=uni.getStorageSync('token')
	latitude.value=uni.getStorageSync('latitude')
	longitude.value=uni.getStorageSync('longitude')
	const userinfo=uni.getStorageSync('userinfo')
	phone.value=userinfo.mobile
	name.value=userinfo.nickname
	level.value=JSON.parse(options.info).level
	money.value = JSON.parse(options.info).money
	image.value = JSON.parse(options.info).image
	console.log(level.value);
	request.post('Places/lists',{
			data:{
				lng:longitude.value,
				lat:latitude.value
			},
			header:{
				"token":token.value
			}
		}).then(res=>{
			console.log(res);
			columns.value.push(res.data)
			console.log(columns.value);
		}).catch(err=>{
			console.log(err);
		})
})
let token=ref()
let latitude = ref() // 纬度
let longitude = ref()
let level=ref(0)
let money=ref('')
let places_id=ref('')
let text=ref('请选择门店')
let close=true
let show = ref(false);
let columns = ref([]);
let name=ref('')
let phone=ref('')
let image=ref('')
const cancel=()=>{
	show.value=false
}
const confirm=(e)=>{
	console.log(e);
	console.log(e.value[0].name);
	text.value=e.value[0].name
	places_id.value=e.value[0].id
	show.value=false
}
const closeOnClickOverlay=()=>{
	show.value=false
}
const uPickerRef = ref()
const distChangeHandler = (item) => {
    const { columnIndex, value,index } = item;
	console.log(item);
    let city = value;
	if(columnIndex === 0){
		uPickerRef.value.setColumnValues(1, city);
	}
  };
  const tjvip=()=>{
	  if(places_id.value==''){
		  uni.showToast({
		  	title: '请先选择场馆',
		  	icon: 'none'
		  })
	  }else{
		  request.post('Recharge/create',{data:{
		  		  level:level.value,
		  		  places_id:places_id.value
		  },header:{
		  		  "token":token.value
		  }}).then(res=>{
			  if (res.code == 0) {
				  uni.$u.toast(res.msg)
				  return
			  }
		  		  console.log(res);
				  wx.requestPayment({
				    timeStamp:res.data.data.timeStamp,
				    nonceStr: res.data.data.nonceStr,
				    package: res.data.data.package,
				    signType:  res.data.data.signType,
				    paySign: res.data.data.paySign,
				    success :(res)=> { 
				  	  console.log('支付成功');
					  uni.$u.toast(res.msg)
					  request.post('user/index', {
					  	header: {
					  		"token": token.value
					  	}
					  }).then(res => {
					  	console.log(res);
					  	uni.setStorageSync("userinfo", res.data)
					  }).catch(err => {
					  	console.log(err);
					  })
					  uni.requestSubscribeMessage({
					  	tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
					  	success(res) {
					  		console.log(res);
					  		// 处理订阅成功后的逻辑
					  		uni.switchTab({
					  			url: '/pages/myde/myde'
					  		})
					  	},
					  	fail(err) {
					  		console.log(err);
					  		// 处理订阅失败后的逻辑
					  	}
					  })
				    },
				    fail :(err)=> { 
				  	  console.log(err,'取消支付');
					  uni.$u.toast(res.msg)
					  setTimeout(() => {
					  						  uni.switchTab({
					  						  	url: '/pages/myde/myde'
					  						  })
					  }, 1200)
				    }
				  })
		  }).catch(err=>{
		  		  console.log(err);
		  })
	  }
	
  }
</script>

<style scoped>
	.opbox{
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		padding-top: 15rpx;
	}  
	.opuser{
		width: 710rpx;
		height: 190rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		
		box-sizing: border-box;
		box-shadow: 0 0 16px -9px rgba(0,0,0,.3);
	}
	.userphone{
		width: 670rpx;
		height: 90rpx;
		border-bottom: 1px solid #bdbdbd;
		display: flex;
		margin: 0 auto;
		font-size: 16px;
		align-items: center;
	}
	.phone{
		margin-right: 60rpx;
	}
	.username{
		width: 670rpx;
		height: 90rpx;
		display: flex;
		margin: 0 auto;
		font-size: 16px;
		align-items: center;
	}
	.name{
		margin-right: 90rpx;
	}
	.opnav{
		width: 710rpx;
		height: 370rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 16px -9px rgba(0,0,0,.3);
	}
	
	.optit{
		width: 670rpx;
		height: 170rpx;
		border-bottom: 1px solid #bdbdbd;
		display: flex;
		margin: 0 auto;
		align-items: center;
	}
	.anvpic{
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.xzbox{
		width: 670rpx;
		display: flex;
		margin: 0 auto;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		font-size: 14px;
	}
	.xzmd{
		display: flex;
		align-items: center;
	}
	.opfk{
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items:center;
	}
	.money{
		width: 470rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		color: #10c696;
	}
	.tijiao{
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align:center;
		color: #fff;
		background-color: #10c696;
	}
</style>
